<!--  -->
<template>
  <div class="home-container">
    <!-- 头部 -->
    <van-nav-bar
      title="鲜花网|花礼网 移动商城"
      fixed
      :z-index="100"
    ></van-nav-bar>
    <!-- 内容部分 -->
    <div class="content">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" indicator-color="#ff734c" :autoplay="3000">
        <van-swipe-item
          v-for="item in swiperList"
          :key="item.goods_id"
          @click="toDetail(item.goods_id)"
        >
          <img :src="item.image_src" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!-- 导航列表 -->
      <ul class="navs-list">
        <li
          class="nav-item"
          v-for="item in navsList"
          :key="item.name"
          @click="toCategory"
        >
          <img :src="item.image_src" alt="" />
        </li>
      </ul>
      <!-- 楼层列表 -->
      <div class="floor-list" v-for="item in floorsList" :key="item.image_src">
        <div class="floor-title">
          <img :src="item.floor_title.image_src" alt="" />
        </div>
        <div class="product-list">
          <div
            class="big-image"
            @click="toGoodsList(item.product_list[0].navigator_url)"
          >
            <img :src="item.product_list[0].image_src" alt="" />
          </div>
          <div class="small-group">
            <div
              class="product-item small-image"
              v-for="(product, index) in item.product_list"
              :key="index"
              v-if="index > 0"
              @click="toGoodsList(product.navigator_url)"
            >
              <img :src="product.image_src" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部标签栏 -->
    <tabbar></tabbar>
  </div>
</template>

<script>
import tabbar from "@/components/tabbar";
import { NavBar, Swipe, SwipeItem } from "vant";
import { getHomeBanner, getHomeNavs, getHomeFloors } from "@/network/front/api";
export default {
  data() {
    return {
      swiperList: [],
      navsList: [],
      floorsList: [],
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getHomeBannerData();
    this.getHomeNavsData();
    this.getHomeFloorsData();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    //获取首页轮播图数据
    async getHomeBannerData() {
      let res = await getHomeBanner({ url: "/home/swiperdata" });
      if (res.message) {
        this.swiperList = res.message;
      }
    },
    //获取首页导航数据
    async getHomeNavsData() {
      let res = await getHomeNavs({ url: "/home/catitems" });
      if (res.message) {
        this.navsList = res.message;
      }
    },
    //获取首页楼层数据
    async getHomeFloorsData() {
      let res = await getHomeFloors({ url: "/home/floordata" });
      if (res.message) {
        this.floorsList = res.message;
      }
    },
    //去详情页
    toDetail(id) {
      this.$router.push({ name: "Detail", params: { id } });
    },
    //去分类页面
    toCategory() {
      this.$router.push({ name: "Category" });
    },
    //去商品列表页
    toGoodsList(url) {
      let keyword = url.slice(url.indexOf("=") + 1);
      this.$router.push({
        name: "List",
        query: {
          type: keyword,
        },
      });
    },
  },
  components: {
    tabbar,
    [NavBar.name]: NavBar,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.home-container >>> .van-nav-bar__content {
  background-color: #ff734c;
}
.home-container >>> .van-nav-bar__title {
  color: #fff;
}
.content {
  padding-top: 46px;
  padding-bottom: 51px;
}
.content .my-swipe img {
  height: 170px;
}
.content >>> .my-swipe .van-swipe__indicator {
  width: 8px;
  height: 8px;
}
.navs-list {
  display: flex;
  margin: 16px 0;
}
.nav-item {
  flex: 1;
}
.nav-item img {
  width: 88px;
  height: 96px;
}
.floor-title img {
  width: 100vw;
  margin: 10px 0;
}
.product-list {
  display: flex;
}
.small-group {
  display: flex;
  flex-wrap: wrap;
}
.product-item {
  width: 120px;
  flex: 1;
}

.big-image {
  width: 125px;
  margin-right: 3px;
}
.big-image img {
  width: 125px;
  height: 100%;
}
.product-item img {
  width: 120px;
  height: 100%;
}
</style>